/* 类组件 */

.TypeClass {
    --controlLen: 414;
    /* 类宽度 */
    --typeClassWide: calc(var(--controlLen, 414) * 0.1304 * 1px);
    /* 图标大小 */
    --iconSize: calc(var(--typeClassWide) * 0.4815);
    /* 字体大小 */
    --fontSize: calc(var(--typeClassWide) * 0.2593);
    /* 右空长度 */
    /* --typeClassMargin: calc(var(--typeClassWide) * 0.3614); */
    /* 类颜色 */
    --typeClassColor: var(--StandardWhite, rgba(255, 255, 255, 1));
    /* 图标颜色 */
    --iconColor: var(--FontLightBlack, rgba(119, 131, 143, 1));
    /* 字体颜色 */
    --fontColor: var(--FontLightBlack, rgba(119, 131, 143, 1));
    /* 点击颜色 */
    --checkColor: var(--StandardBlue, rgba(64, 96, 255, 1));
    /* 类阴影颜色 */
    --typeClassShadowColor: var(--ShadowBlue, rgba(207, 215, 255, 1));

    width: fit-content;
    /* padding-right: var(--typeClassMargin); */
    /* padding-left: var(--typeClassMargin);  */
    /* scroll-snap-align: start; */
    flex-shrink: 0;
}

.TypeClass input[type="radio"] {
    display: none;
}

/* 图标 */
.TypeClass .icon {
    width: var(--typeClassWide);
    height: var(--typeClassWide);
    box-shadow: 0px 0px 18px var(--typeClassShadowColor);
    background-color: var(--typeClassColor);
    border-radius: calc(var(--typeClassWide) * 0.1852);

    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: all 0.3s;
}

.TypeClass .icon i {
    width: var(--iconSize);
    height: var(--iconSize);
    filter: none;
    background-size: 100% 100%;;
    transition: all 0.3s;
}

/* 标签 */
.TypeClass .label {
    content: attr(text);
    width: var(--typeClassWide);
    margin-top: calc(var(--typeClassWide) * 0.1481);
    display: flex;
    justify-content: center;

    font-size: var(--fontSize);
    font-weight: 400;
    color: var(--fontColor);
    transition: all 0.3s;
}

/* 点击后颜色变化 */
.TypeClass input[type="radio"]:checked ~ .icon {
    background-color: var(--checkColor);
}

.TypeClass input[type="radio"]:checked ~ .label {
    color: var(--checkColor);
}

.TypeClass input[type="radio"]:checked ~ .icon i {
    filter: brightness(100);
}